<script setup lang="ts">
import router from '@/router'
import { ref } from 'vue'
import { modileRules, passwordRules } from '@/utils/rules'
import { showFailToast, showSuccessToast } from 'vant'
import { loginPassword } from '@/services/user'
import { useLoginStore } from '@/stores'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useLoginStore()
// const onClickRight = () => {
//   console.log('onClickRight')
//   router.push('/hhh')
// }

const mobile = ref<string>('13230000009')
const password = ref<string>('abc12345')
const isAgree = ref(true)
const onSubmit = async () => {
  // try {
  if (!isAgree.value) {
    return showFailToast('请勾选用户协议')
  }
  // console.log(1)
  // 调用登录接口
  const res = await loginPassword(mobile.value, password.value)
  console.log('1')
  store.updataLogin(res.data)
  // 如果有回跳地址就回调=跳 没有就跳转到个人中心页
  router.push((route.query.returnUrl as string) || '/user')
  // 消息提示
  showSuccessToast('登录成功')
  // } catch (err) {
  //   console.log(err)
  // }
}
</script>

<template>
  <!-- 导航栏 -->
  <CpNavBar title="登录" right-text="注册"></CpNavBar>
  <!-- 头部 -->
  <div class="header">
    <h2>密码登录</h2>
    <a href="javascript:;">
      <span>短信验证码登录</span>
      <van-icon name="arrow" />
    </a>
  </div>
  <!-- 表单 -->
  <van-form @submit="onSubmit" autocomplete="off">
    <van-cell-group inset>
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="modileRules"
      />
      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"
        :rules="passwordRules"
      />
    </van-cell-group>
    <div class="cp-cell">
      <van-checkbox v-model="isAgree" icon-size="16px">
        <span>我已同意</span>
        <a href="javascript:;">用户协议</a>
        <span>及</span>
        <a href="javascript:;">隐私条款</a>
      </van-checkbox>
    </div>
    <div class="cp-cell">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
    <div class="cp-cell">忘记密码？</div>
  </van-form>
  <!-- 底部 -->
  <div class="login-other">
    <van-divider>第三方登录</van-divider>
    <div class="icon">
      <img src="@/assets/qq.svg" alt="" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  display: flex;
  margin-left: -18px;
  justify-content: space-around;
  padding: 30px 0;
  height: 50px;
  line-height: 50px;
  h2 {
    font-weight: normal;
  }
}
.cp-cell {
  height: 52px;
  line-height: 24px;
  padding: 14px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .van-checkbox {
    a {
      color: var(--cp-primary);
      padding: 0 5px;
    }
  }
}
.login-other {
  margin-top: 60px;
  padding: 0 30px;
  .icon {
    display: flex;
    justify-content: center;
    img {
      width: 36px;
      height: 36px;
      padding: 4px;
    }
  }
}
</style>
